<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性布局</title>
	<style type="text/css">
	#box{
		width: 500px;
		height: 500px;
		background-color: #ccc;
		margin:100px auto;
		display:flex;
		/*主轴方向*/
		/*flex-direction:row;*/
		/*换行*/
		/*flex-wrap:wrap;*/
        /*弹性子元素在主轴上的对齐方式*/
		/*justify-content:flex-end;*/
		/*侧轴方向*/
		/*align-items:stretch ;*/
	}
	#box div{
		width: 60px;
		/*height: 60px;*/
		background-color:black;
		border-radius:30px;
		color:white;
		line-height:60px;
		text-align:center;
		float:right;
	}
	#wrap{
		width: 200px;
		height: 800px;
		background:gold;
		display:flex;
	}
	#wrap>div:nth-child(1){
		width: 100px;
		height: 200px;
		background:pink;
		/*flex-grow:1;*/
		flex-shrink:2;
		
	}
	#wrap>div:nth-child(2){
		width: 100px;
		height: 300px;
		background:purple;
		/*order:-1;*/
		/*flex-grow:2;*/
		flex-shrink:1;
		align-self :center;

	}
	#wrap>div:nth-child(3){
		width: 100px;
		height: 250px;
		background:lightblue;
		/*flex-grow:2;*/
		flex-shrink:2;
		align-self :flex-end;
		
	}
	

	</style>
</head>
<body>
	<!-- 布局方式:
	    固定布局
	    浮动布局
	    响应式布局 媒介查询 viewport
	    流式布局
	    弹性布局
	 -->
	 <!-- 如何开启弹性模式?
	     display:flex;
	     注意:如果对一个元素开启弹性布局,则其内部所有子元素的float,clear,vertical-align等等效果统统失效
	  -->
	  <!-- 容器:设置了display:flex的元素.
	      弹性子元素:容器里的所有元素.
	      主轴:所以的弹性子元素会从主轴的起点开始按照顺序排布到主轴的终点
	      侧轴(交叉轴):与主轴垂直的轴
	      主轴和侧轴的存在只是为了帮助我们对元素的排布方向加以明确和理解
	      没有真实的这两种轴.

	      容器的样式:
	    1.主轴的方向 flex-direction
	      a.row(默认),水平方向  从左往右
	      b.row-reverse,水平方向  从右往左
	      c.column,竖直方向,从下往上
	      d.column-reverse,竖直方向,从下往上
	    2.换行方式 flex-wrap
	      a.nowrap 不换行,默认的,如果距离不够,系统会强制压缩元素的宽.
	      b.wrap 换行 
	      c.wrap-reverse 换行,换行后换行的元素会跑到原行的上面
	    3.弹性子元素在主轴上的对齐方式.  justify-content
	      a.space-between  最外侧两个元素靠边,其余元素左右距离相等
	      b.space-around   所有元素的左右距离相等
	      c.flex-start     按照元素的书写顺序靠主轴起点排列
	      d.flex-end       按照元素的书写顺序靠主轴终点排列
	      e.center
	    4.弹性子元素在侧轴上的对齐方式 align-items
	      a.flex-start 向侧轴的起点对齐   
	      d.flex-end  向侧轴的终点对齐      
	      c.center  向侧轴的中点对齐
	      d.baseline  文字基线对齐
	      e.stretch  如果弹性子元素不设置高度,则高度填满整个侧轴(默认) 
	   -->
	   <!-- <div id="box">
	   	<div>1</div>
	   	<div>2</div>
	   	<div>3</div>
	   	<div>4</div>
	   	<div>5</div>
	   	<div>6</div>
	   </div> -->



	   <!-- 弹性子元素样式:
	       1.顺序数值order,决定元素的排列顺序,默认值都为0,值越小,位置越靠前,值相等,由书写顺序决定,写的早靠前

	       2.多余的空间分配比例 flex-grow
	       默认值是0,表示默认情况下元素不会占据多余空间,数字表示所分得的剩余空间的份数.

	       3.当空间不足时的收缩比例 flex-shrink,默认值是1,0表示不缩小  

	       4.align-self 与align-items的值基本相同 
	    -->
	   <div id="wrap">
	   	<div>生死契阔</div>
	   	<div>与子成说</div>
	   	<div>执子之手</div>
	   </div>
</body>
</html>